<template>
  <van-pull-refresh v-model="refreshing" @refresh="onrefresh">
    <div class="index-container bg-contain bg-no-repeat px-[15px] pt-[60px]">
      <Community
        :communityTxt="community"
        :communityChildTxt="mch"
        @communityTxt="handleSetCommunityTxt"
        @communityChildTxt="handleSetCommunityChildTxt"
      />
      <Statistic :statistics="statistics" />
      <Confirmation :statistics="statistics" />
      <a class="h-[45px] w-[210px] rounded-full flex justify-center items-center text-[#fff] bg-[#2e7cff] active:bg-[#3c85ff] text-base mt-10 mb-20 m-auto" @click="handleGoEntry">快速录入</a>
    </div>
  </van-pull-refresh>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import Community from '@/components/Community.vue'
import Statistic from './components/Statistic.vue'
import Confirmation from './components/Confirmation.vue'
import { useHomeEffect } from './hooks/useHomeEffect'
import { useHomeStore } from '@/store/home'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'Home',
  components: {
    Community, Statistic, Confirmation
  },
  setup() {
    const store = useHomeStore()
    const router = useRouter()

    const statistics = computed(() => store.statistics)
    const {
      community,
      mch,
      community_id,
      mch_id,
      getStatistics,
      handleSetCommunityTxt,
      handleSetCommunityChildTxt,
      refreshing,
      onrefresh,
    } = useHomeEffect()
    getStatistics() // 加载数据

    const handleGoEntry = () => {
      router.push({path: "/entry"})
    }

    return {
      statistics,
      community,
      community_id,
      mch,
      mch_id,
      handleSetCommunityTxt,
      handleSetCommunityChildTxt,
      handleGoEntry,
      refreshing,
      onrefresh,
    }
  }
})
</script>
<style lang="scss" scoped>
.index-container{
  background-image: url('../../assets/bg.png')
}
</style>
